﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="OrcasThemes">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>Home</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" href="css/screen.css">
	<link rel="stylesheet" href="css/animation.css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<link href="css/lity.css" rel="stylesheet">
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<div id="home1" class="container-fluid standard-bg">
			<div class="row header-top">
				<div class="col-lg-3 col-md-6 col-sm-5 col-xs-8">
					<a class="main-logo" href="#"><img src="img/main-logo.png" class="main-logo imgresponsive"
							alt="Muvee Reviews" title="Muvee Reviews"></a>
				</div>
				<div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs">
				</div>
				<div class="col-lg-3 col-md-6 col-sm-7 hidden-xs">
					<div class="right-box">
						<button type="button" class="access-btn" data-toggle="modal" data-target="#enquirypopup">上传新的视频</button>
					</div>
				</div>
			</div>
			<!-- MENU -->
			<div class="row home-mega-menu ">
				<div class="col-md-12">
					<nav class="navbar navbar-default">
						<div class="navbar-header">
							<button class="navbar-toggle" type="button" data-toggle="collapse"
								datatarget=".js-navbar-collapse">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						</div>
						<div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
							<ul class="nav navbar-nav">
								<li><a href="index.html">Home</a></li>
							</ul>
							<div class="search-block">
								<form>
									<input type="search" placeholder="Search">
								</form>
							</div>
						</div>
						<!-- /.nav-collapse -->
					</nav>
				</div>
			</div>
			<!-- CORE -->
			<div class="row">
				<!-- SIDEBAR -->
				<div class="col-lg-2 col-md-4 hidden-sm hidden-xs">
				</div>
				<!-- HOME MAIN POSTS -->
				<div class="col-lg-10 col-md-8">
					<section id="home-main">
						<h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>最新视频</h2>
						<div class="row">
							<!-- ARTICLES -->
							<div class="col-lg-9 col-md-12 col-sm-12">
								<div class="row auto-clear">
									<article class="col-lg-3 col-md-6 col-sm-4" v-for="video in videos" vcloak>
										<!-- POST L size -->
										<div class="post post-medium">
											<div class="thumbr">
												<a class="afterglow post-thumb"
													v-bind:href="'/singlevideo.html?id='+video.id" target="_blank">
													<span class="play-btn-border" title="Play">
														<i class="fa fa-play-circle headline-round"
															ariahidden="true"></i>
													</span>
													<img class="img-responsive" v-bind:src="video.image" alt="#">
												</a>
											</div>
											<div class="infor">
												<h4><a class="title" href="#">{{video.name}}</a></h4>
											</div>
										</div>
									</article>
								</div>
								<div class="clearfix spacer"></div>
							</div>
							<!-- RIGHT ASIDE -->
						</div>
					</section>
				</div>
			</div>
		</div>
		<!-- TABS -->
		<div id="tabs" class="container-fluid featured-bg">
		</div>
		<!-- MAIN -->
		<div id="main" class="container-fluid">
			<div class="clearfix"></div>
		</div>
		<!-- CHANNELS -->
		<div id="channels-block" class="container-fluid channels-bg">
			<div class="container-fluid ">
				<div class="col-md-12">
					<!-- CHANNELS -->
					<section id="channels">
					</section>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!-- FOOTER -->
		<div id="footer" class="container-fluid footer-background">
			<div class="container">
				<footer>
					<div class="row copyright-bottom text-center">
						<div class="col-md-12 text-center">
							<a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5
template">
								<img src="img/footer-logo.png" class="img-responsive text-center" alt="Video
Magazine Bootstrap HTML5 template">
							</a>
							<p>Copyright &copy; 2022.Author by {{author}}</p>
						</div>
					</div>
				</footer>
			</div>
		</div>
		<!-- MODAL -->
		<div id="enquirypopup" class="modal fade in " role="dialog">
			<div class="modal-dialog">
				<!-- Modal content-->
				<div class="modal-content row">
					<div class="modal-header custom-modal-header">
						<button type="button" class="close" data-dismiss="modal">×</button>
						<h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>上传视频</h2>
					</div>
					<div class="modal-body">
						<form name="info_form" class="form-inline" action="/video" method="post"
							enctype="multipart/form-data">
							<div class="form-group col-sm-12">
								<input type="text" name="name" placeholder="视频名称">
							</div>
							<div class="form-group col-sm-12">
								<input type="text" name="info" placeholder="视频描述">
							</div>
							<div class="form-group col-sm-12">
								<input type="file" name="video" placeholder="视频文件">
							</div>
							<div class="form-group col-sm-12">
								<input type="file" name="image" placeholder="封面图片">
							</div>
							<div class="form-group col-sm-12">
								<input type="submit" name="submit" value="提交">
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery-1.12.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/lity.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		$(".nav .dropdown").hover(function () {
			$(this).find(".dropdown-toggle").dropdown("toggle");
		});
	</script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				author: 'Lyh',
				videos: []
			},
			methods: {
				get_allvideos: function () {
					$.ajax({
						type: "get",
						url: "/video",
						context: this,
						success: function (result, status, xhr) {
							this.videos = result;
						}
					})
				}
			}
		})
		app.get_allvideos();
	</script>
</body>

</html>